<template>
  <div class="mapChange" >
      <div class="flex-map" @click="setFloatDiv('RASTER')">
        <img src="@/assets/mapView/yaogan.png"/>
        <div :style="{'backgroundColor': maptype == 'RASTER' ? 'blue' : ''}">遥感地图</div>
      </div>
      <div class="flex-map" @click="setFloatDiv('VECTOR')">
        <img src="@/assets/mapView/shiliang.png"/>
        <div :style="{'backgroundColor': maptype == 'VECTOR' ? 'blue' : ''}">矢量地图</div>
      </div>
      <div class="flex-map" @click="setFloatDiv('TOPOGRAPHY')">
        <img src="@/assets/mapView/dixing.png"/>
        <div :style="{'backgroundColor': maptype == 'TOPOGRAPHY' ? 'blue' : ''}">地形地图</div>
      </div>
    </div>
</template>

<script>
import * as mapUtils from '../../mapUtils'
export default {
  data() {
    return {
      maptype: 'RASTER'
    }
  },
  methods: {
    setFloatDiv(id) {
      this.maptype = id
      const mark = id + 'MARK'
      const layers = mapUtils.getMap().getLayers().getArray().filter(layer => layer.getProperties().layerId === 'TileLayers')
      layers.forEach(item => {
        item.setVisible(false)
        if (item.values_.id === id) {
          item.setVisible(true)
        }
        if (item.values_.id === mark) {
          item.setVisible(true)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mapChange {
  width: 380px;
  position: absolute;
  background: linear-gradient(90deg, #031B36 0%, rgba(3,28,51,0.3) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1)) 1 1;
  padding: 8px;
  margin-bottom: 16px;
  bottom: 60px;
  color: white;
  border-radius: 5px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  z-index: 2;
  .flex-map {
    width: 32%;
    position: relative;
    /* border:1px solid red; */
    img{
      width: 100%;
      height: auto;
      border-style: none; // width:100%;
      vertical-align: top
    }
    div {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
.toolDataShow {
  right: 530px;
}
.toolDataUnshow {
  right: 7%;
}
</style>
